Angular Material এর MatRadioButton একটি অত্যন্ত জনপ্রিয় এবং ব্যবহারযোগ্য রেডিও বাটন কম্পোনেন্ট। এটি Material Design-এর গাইডলাইন অনুসরণ করে তৈরি করা হয়েছে এবং ডেভেলপারদের জন্য বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে। রেডিও বাটন ব্যবহারকারীদের মধ্যে থেকে একটি নির্দিষ্ট বিকল্প নির্বাচন করতে সহায়ক।

Angular Material এর MatRadioButton কম্পোনেন্টের সাহায্যে আপনি সহজেই সুন্দর এবং আধুনিক রেডিও বাটন তৈরি করতে পারেন।

রেডিও বাটন ইন্সটল এবং সেটআপ

প্রথমে Angular Material ইন্সটল করা থাকতে হবে। যদি এটি এখনও ইন্সটল না করে থাকেন, তবে নিম্নলিখিত কমান্ডটি ব্যবহার করে Angular Material ইন্সটল করুন:

ng add @angular/material

এছাড়া, MatRadioModule ব্যবহার করতে হবে, যা রেডিও বাটনের কম্পোনেন্ট সরবরাহ করে। MatRadioModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatRadioModule } from '@angular/material/radio';

@NgModule({
  imports: [
    MatRadioModule
  ]
})
export class AppModule { }

রেডিও বাটন ব্যবহার করা

এখন আপনি MatRadioButton কম্পোনেন্ট ব্যবহার করে HTML ফাইলে রেডিও বাটন তৈরি করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো:

১. HTML এ রেডিও বাটন ব্যবহার

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, <mat-radio-group> ট্যাগটি রেডিও বাটনের গ্রুপ তৈরি করবে, এবং প্রতিটি <mat-radio-button> একটি পৃথক রেডিও বাটন তৈরি করবে। গ্রুপের মধ্যে শুধুমাত্র একটি বাটন নির্বাচন করা সম্ভব হবে, কারণ রেডিও বাটনগুলি একে অপরকে এক্সক্লুসিভলি নির্বাচন করতে সাহায্য করে।

২. টাইপস্ক্রিপ্টে সিলেক্টেড ভ্যালু বাউন্ড করা

আপনি যদি রেডিও বাটনের সিলেক্টেড ভ্যালুকে টাইপস্ক্রিপ্টে ব্যবহার করতে চান, তবে [(ngModel)] ব্যবহার করে রেডিও বাটনের মান বাউন্ড করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, selectedOption একটি টাইপস্ক্রিপ্ট ভ্যারিয়েবল যা সিলেক্ট করা অপশনটি ধারণ করবে।

৩. টাইপস্ক্রিপ্ট কোড

import { Component } from '@angular/core';

@Component({
  selector: 'app-radio-button',
  templateUrl: './radio-button.component.html',
})
export class RadioButtonComponent {
  selectedOption: string = 'option1';  // ডিফল্ট সিলেক্টেড অপশন
}

এখানে, selectedOption হল ডিফল্ট মান, এবং ব্যবহারকারী যদি অন্য কোনো অপশন নির্বাচন করে, তা পরিবর্তিত হবে।

কাস্টমাইজেশন অপশন

১. ডিফল্ট সিলেক্ট করা অপশন

আপনি সহজেই একটি ডিফল্ট রেডিও বাটন সিলেক্ট করতে পারেন। যেমন:

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1" checked>Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, checked অ্যাট্রিবিউট ব্যবহার করে আপনি প্রথম রেডিও বাটনটি ডিফল্ট হিসেবে সিলেক্ট করতে পারেন।

২. রেডিও বাটন ডিসেবল করা

আপনি রেডিও বাটনটি ডিসেবল (অক্ষম) করতে চাইলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-radio-group [(ngModel)]="selectedOption" aria-label="Select an option">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2" disabled>Option 2 (Disabled)</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

এখানে, "Option 2" রেডিও বাটনটি ডিসেবল করা হয়েছে, যা ব্যবহারকারী নির্বাচন করতে পারবেন না।

৩. রেডিও বাটন স্টাইল কাস্টমাইজেশন

আপনি CSS ব্যবহার করে রেডিও বাটনের স্টাইলও কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

mat-radio-button {
  font-size: 16px;
  color: #6200ea;
}

এটি রেডিও বাটনের ফন্ট সাইজ এবং রঙ পরিবর্তন করবে।

Angular Material এর MatRadioButton কম্পোনেন্ট খুবই সহজ এবং ব্যবহারযোগ্য, যা অ্যাপ্লিকেশনগুলিতে একটি সুন্দর এবং আধুনিক রেডিও বাটন তৈরি করতে সাহায্য করে। আপনি [(ngModel)] ব্যবহার করে সিলেক্ট করা অপশন টাইপস্ক্রিপ্টে বাউন্ড করতে পারেন এবং রেডিও বাটনগুলির কাস্টমাইজেশন অপশন ব্যবহার করে আপনার UI কে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করতে পারেন।